Yutes [utilities]

Skip Ahead

• Purpose
• TLDR version
• Installation
• Included Files
• Config and Usage Examples
  • utilities
  • colors
  • forms
  • buttons

---

Purpose

The @riapacheco/yutes package is a (really really) lightweight (and agnostic) SCSS pack intended to provide utilities similar to those found in common frameworks like Bootstrap, but without the rigidness that limits fluid design.

These utilities are made possible by Sass features like @each & @for, and through intentional design of classes, like the time-intensive flexbox classes.

TLDR

This package expedites your workflow with:

• Ready-made utility classes (e.g. mr-2 for margin-right: 2rem;)
• Complete Browser / Webkit default style overrides, including:
  • Blue outlines on inputs
  • Weird text sizing; and
  • General element width/height behaviors that prohibit consistency
• Freedom to start with bare-bones utilities first, to enable structure, before allowing you to evolve personality-driven styles through (optional):
  • 3-color schemes (/yutes/colors.scss)
  • Button adjustments forborder-radius and responsive sizing

---

Installation

To install from NPM

$ npm install @riapacheco/yutes

In your main SCSS file, add:

  @import '~@riapacheco/yutes/yutes.scss';
  @import '~@riapacheco/yutes/colors.scss';

---

Included Files

File	Features	Usage Example Links
yutes.scss	👉 Imports for all helper stylesheets 👉 Overrides for all browser/webkit default styles from browser: Unsets button, unsets input, fixes img weird sizing, removes scrollbar, removes active styles for anchors [a], removes padding/margin on <small> elements, removes styles on select and textarea, removes margin/padding from <nav> element	none
utilities.scss	👉 Dynamic padding and margin classes 👉 Optional containers: (e.g. .container-sm, .container) for centered narrow content 👉 Flexbox classes for in-template structuring	utilities
colors.scss	👉 Three color scheme with various shades 👉 State colors including $success, $warning, $danger, and $info (with 3 shades each) 👉 Straight color classes of all, allowing you to change colors and background colors in the HTML template 👉 Note: includes $form-input-field-bg for forms.scss file	colors
forms.scss	👉 Enables form-group elements to contain stacked groups of labels and inputs or controls 👉 Adjusts select element to match rest of styling and dynamically change with rem calculations	forms
buttons.scss	👉 Configurable vars ($base-border-radius, $base-font-size, and $rounded-border-radius 👉 pseudo selectors that enable hover effects of brightening or darkening (for flexibility) 👉 Bootstrap-like classes for creating buttons quickly with configuration via chained classes	buttons

---

Config and Usage Examples

utilities

In the template ⤵️

colors

Change colors ⤵️

Use classes in your template ⤵️

forms

In the template ⤵️

buttons

Configurable in the buttons.scss file ⤵️

Usage in the html template ⤵️

---

Remember... it's just a bunch of SCSS files. You always have the option of going into the node_modules/@riapacheco file to make all the changes you need!